<template>
  <a-modal title-align="start" :footer="false" title="定制详情" :mask-closable="false" v-model:visible="showvisible" @cancel="close" :width="1000">
    <div class="top">
      <a-descriptions :data="list.filter((e) => e.flag)" bordered>
        <template #label="{ label }">{{ label }}：</template>
        <template #value="{ data, value }">
          <div v-if="data.label == '订单号'">{{ itemInfo.platformOrderNumber }}</div>
          <div v-if="data.label == '定制编号'">{{ $extract(itemInfo, 'customCode') }}</div>
          <div v-if="data.label == '产品SKU'">{{ $extract(itemInfo, 'product.productSku') }}</div>
          <div v-if="data.label == '期望交期'">{{ $setTime(itemInfo.gmtExpectDelivery, 'YYYY-MM-DD') }}</div>
          <div v-if="data.label == '提交工厂时间'">{{ $setTime(itemInfo.gmtSubmitSupplier, 'YYYY-MM-DD') }}</div>
          <div v-if="data.label == '销售员'">{{ $extract(itemInfo, 'saler.name') }}</div>
          <div v-if="data.label == '销售公司'">{{ $extract(itemInfo, 'companyName') }}</div>
          <div v-if="data.label == '采购方'">{{ $extract(itemInfo, 'purchaseCompany.companyName') || '--' }}</div>
          <div v-if="data.label == '采购员'">{{ $extract(itemInfo, 'purchaser.name') || '--' }}</div>
          <div v-if="data.label == '供应商'">{{ $extract(itemInfo, 'supplierCompanyp.companyName') || '--' }}</div>
        </template>
      </a-descriptions>
    </div>
    <div class="bottom mt10">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" title="定制信息">
          <div class="custom-info-con mt10 flex">
            <div class="img-con">
              <div class="title-bar">定制图</div>
              <div v-if="customImgList.length > 0">
                <a-image-preview-group infinite>
                  <a-space wrap>
                    <a-image class="mb10" v-for="(item, index) of customImgList" :key="index" :src="item.url" width="100" height="100" />
                  </a-space>
                </a-image-preview-group>
              </div>
              <div v-else>
                <a-empty description="暂无定制图"></a-empty>
              </div>
              <div class="title-bar">合并图</div>
              <a-image v-if="mergeCustomPic.url" :src="mergeCustomPic.url" width="200" />
              <a-empty v-else description="暂无合并图"></a-empty>
            </div>
            <div class="suctom-basic-info">
              <a-descriptions class="mt10" :column="2" :value-style="{ width: '200px' }" :data="customBasicInfoList" bordered>
                <template #label="{ label }">{{ label }}：</template>
                <template #value="{ data, value }">
                  <div v-if="data.label == '定制类型'">{{ $extract(itemInfo, 'customInfo.customType') }}</div>
                  <div v-if="data.label == '材质'">{{ $extract(itemInfo, 'customInfo.material') }}</div>
                  <div v-if="data.label == '刻字内容'">{{ $extract(itemInfo, 'customInfo.fontTxt') }}</div>
                  <div v-if="data.label == '字体'">{{ $extract(itemInfo, 'customInfo.fontFamily') }}</div>
                  <div v-if="data.label == '电镀颜色'">{{ $extract(itemInfo, 'customInfo.platinColor') }}</div>
                  <div v-if="data.label == '戒指尺码'">{{ $extract(itemInfo, 'customInfo.ringSize') }}</div>
                  <div v-if="data.label == '石头'">{{ $extract(itemInfo, 'customInfo.stone') }}</div>
                  <div v-if="data.label == '链条'">{{ getfittingName(itemInfo) }}</div>
                  <div v-if="data.label == '字印'">{{ $extract(itemInfo, 'customInfo.fontPrint') }}</div>
                  <div v-if="data.label == '备注'">{{ $extract(itemInfo, 'customInfo.remark') }}</div>
                </template>
              </a-descriptions>
              <div style="margin-top: 20px">
                <a-button class="gray-outline" @click="download"> 下载图片 </a-button>
                <a-button v-if="['20', '40', '50', '60'].includes(itemInfo.status) && props.type == 'purchase'" class="gray-outline ml10" @click="showEditCustomModal = true"> 修改定制信息 </a-button>
              </div>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" title="采购费用">
          <div class="coast-purchase mt10">
            <div class="top common-text">
              <a-space>
                <div>半成品毛坯供应方： {{ getSupplierName(itemInfo) }} </div>
                <div style="margin-left: 50px">数量： {{ itemInfo.qtyPurchase }}</div>
              </a-space>
            </div>
            <div class="bottom flex">
              <div class="supplier-coast">
                <div class="title-bar">供应商结算费用</div>
                <a-descriptions :data="supplierCoastList" :label-style="{ textAlign: 'right' }" :column="1" bordered>
                  <template #label="{ label, data }">
                    <div v-if="!data.tip">{{ label }}：</div>
                    <a-popover :content="data.tip" v-else>
                      <p>
                        <icon-question-circle />
                        <span>{{ label }}：</span>
                      </p>
                    </a-popover>
                  </template>

                  <template #value="{ label, data }">
                    <div v-if="data.label == '材质单价(元/g)'">{{ itemInfo.supplierCloseCost.amtAvgMaterial }}</div>
                    <div v-if="data.label == '单件加工费'">{{ itemInfo.supplierCloseCost.amtAvgProcess }}</div>
                    <div v-if="data.label == '材质净重(g)'">{{ itemInfo.supplierCloseCost.wgtNetMaterial }} </div>
                    <div v-if="data.label == '损耗率(%)'">{{ itemInfo.supplierCloseCost.attritionRate }}</div>
                    <div v-if="data.label == '连耗重量(g)'">{{ itemInfo.supplierCloseCost.wgtContinueAttrition }}</div>
                    <div v-if="data.label == '材质金额'">{{ itemInfo.supplierCloseCost.amtMaterial * itemInfo.supplierCloseCost.wgtContinueAttrition }}</div>
                    <div v-if="data.label == '加工费'">{{ itemInfo.supplierCloseCost.amtProcess }}</div>
                    <div v-if="data.label == '石头费用'">{{ itemInfo.supplierCloseCost.amtStone }}</div>
                    <div v-if="data.label == '链条费用'">{{ itemInfo.supplierCloseCost.amtChain }}</div>
                    <div v-if="data.label == '其他费用'">{{ itemInfo.supplierCloseCost.amtOther }}</div>
                    <div v-if="data.label == '合计金额'">{{ itemInfo.supplierCloseCost.amtTotal }}</div>
                    <div v-if="data.label == '税率(%)'">{{ itemInfo.supplierCloseCost.taxRate }}{{ itemInfo.supplierCloseCost.includeTax ? '（含税）' : '（不含税）' }}</div>
                    <div v-if="data.label == '税金'">{{ itemInfo.supplierCloseCost.amtTax }}</div>
                  </template>
                </a-descriptions>
              </div>
              <div class="sale-coast" v-if="itemInfo.saleCloesCost && props.type != 'supplier'">
                <div class="title-bar">业务结算费用</div>
                <a-descriptions :data="saleCoastList" :label-style="{ textAlign: 'right' }" :column="1" bordered>
                  <template #label="{ label, data }">
                    <div v-if="!data.tip">{{ label }}：</div>
                    <a-popover :content="data.tip" v-else>
                      <p>
                        <icon-question-circle />
                        <span>{{ label }}</span>
                      </p>
                      <template #content>
                        <div v-if="label == '半成品货值'">
                          <div>半成品货值是指半成品毛坯的成本。</div>
                          <div>默认值来源</div>
                          <div>半成品供应方=供应商：材质单价*连耗重量</div>
                          <div>半成品供应方=采购方：半成品出库时的库存单价*数量</div>
                          <div>半成品供应方=需求方：半成品出库时的库存单价*数量</div>
                        </div>
                        <div v-if="label == '合计金额'">
                          <div>这里的合计金额，是指业务部门需要支付给采购部门的总费用，所以需要根据半产品供应方是谁分开计算。</div>
                          <div>半成品供应方=供应商：半成品货值+采购工费+石头费用+链条费用+其他费用</div>
                          <div>半成品供应方=采购方：半成品货值+采购工费+石头费用+链条费用+其他费用</div>
                          <div>半成品供应方=需求方：采购工费+石头费用+链条费用+其他费用</div>
                        </div>
                        <div v-if="label == '货值'">
                          <div>含税货值=（半产品货值+采购工费+石头费用+链条费用+其他费用）-税金</div>
                          <div>不含税货值=半产品货值+采购工费+石头费用+链条费用+其他费用</div>
                        </div>
                      </template>
                    </a-popover>
                  </template>

                  <template #value="{ label, data }">
                    <div v-if="data.label == '半成品货值'">{{ itemInfo.saleCloesCost.amtSemiGoodValue }}</div>
                    <div v-if="data.label == '采购工费'">{{ itemInfo.saleCloesCost.amtPurchaseLabor }}</div>
                    <div v-if="data.label == '石头费用'">{{ itemInfo.saleCloesCost.amtStone }}</div>
                    <div v-if="data.label == '链条费用'">{{ itemInfo.saleCloesCost.amtChain }}</div>
                    <div v-if="data.label == '其他费用'">{{ itemInfo.saleCloesCost.amtOther }}</div>
                    <div v-if="data.label == '合计金额'">{{ itemInfo.saleCloesCost.amtTotal }}</div>
                    <div v-if="data.label == '税率(%)'">{{ itemInfo.saleCloesCost.taxRate }}{{ itemInfo.saleCloesCost.includeTax ? '（含税）' : '（不含税）' }}</div>
                    <div v-if="data.label == '税金'">{{ itemInfo.saleCloesCost.amtTax }}</div>
                    <div v-if="data.label == '货值'">{{ itemInfo.saleCloesCost.amtGoodValue }}</div>
                  </template>
                </a-descriptions>
              </div>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="3" title="日志">
          <logList :id="itemInfo.id" api="getCustomPurchaseLog" />
        </a-tab-pane>
      </a-tabs>
    </div>
    <template #footer class="modal-footer">
      <a-button @click="showvisible = false">取消</a-button>
      <a-button type="primary" @click="showvisible = false">确定</a-button>
    </template>
  </a-modal>
  <editCustomInfo v-if="showEditCustomModal" v-model="showEditCustomModal" :info="itemInfo" @save="updateInfo" />
</template>

<script lang="ts" setup>
  import { onMounted, ref, computed } from 'vue'
  import { downloadMul } from '@/utils/index'
  import { getCustomOrderPurchaseById } from '@/api/purchase'
  import logList from './Log/logsList.vue'
  import editCustomInfo from './editCustomInfo.vue'
  let props = defineProps(['modelValue', 'info', 'getfittingName', 'type'])
  let emits = defineEmits(['save', 'update:modelValue'])
  let showvisible = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emits('update:modelValue', val)
    },
  })

  let list = ref([
    { label: '订单号', value: 'Socrates', flag: props.type == 'purchase' },
    { label: '定制编号', value: 'Socrates', flag: true },
    { label: '产品SKU', value: 'Socrates', flag: true },
    { label: '期望交期', value: 'Socrates', flag: true },
    { label: '提交工厂时间', value: 'Socrates', flag: props.type != 'purchase' },
    { label: '销售员', value: 'Socrates', flag: props.type == 'purchase' },
    { label: '销售公司', value: 'Socrates', flag: props.type == 'purchase' },
    { label: '采购方', value: 'Socrates', flag: true },
    { label: '采购员', value: 'Socrates', flag: true },
    { label: '供应商', value: 'Socrates', flag: props.type == 'purchase' },
  ])

  let customBasicInfoList = ref([
    { label: '定制类型', value: 'Socrates' },
    { label: '材质', value: 'Socrates' },
    { label: '刻字内容', value: 'Socrates' },
    { label: '字体', value: 'Socrates' },
    { label: '电镀颜色', value: 'Socrates' },
    { label: '戒指尺码', value: 'Socrates' },
    { label: '石头', value: 'Socrates' },
    { label: '链条', value: 'Socrates' },
    { label: '字印', value: 'Socrates' },
    { label: '备注', value: 'Socrates' },
  ])

  let supplierCoastList = ref([
    { label: '材质单价(元/g)', tip: '' },
    { label: '单件加工费', tip: '' },
    { label: '材质净重(g)', tip: '材质净重是指产品出库时扣除石头和链条之外的重量' },
    { label: '损耗率(%)', tip: '生产加工过程中主材质的损耗率' },
    { label: '连耗重量(g)', tip: '连耗重量，是指净重加上损耗的重量。连耗重量=材质净重+（材质净重*损耗率）' },
    { label: '材质金额', tip: '材质金额=材质单价*连耗重量' },
    { label: '加工费', tip: '加工费=单件加工费*数量' },
    { label: '石头费用', tip: '' },
    { label: '链条费用', tip: '' },
    { label: '其他费用', tip: '' },
    { label: '合计金额', tip: '合计金额=材质金额+加工费+石头费用+链条费用+其他费用' },
    { label: '税率(%)', tip: '' },
    { label: '税金', tip: '税金=合计费用*税率' },
  ])
  let saleCoastList = ref([
    { label: '半成品货值', tip: '1' },
    { label: '采购工费', tip: '采购工费是指业务部门需要支付给采购部门的跟单服务费。' },
    { label: '石头费用', tip: '' },
    { label: '链条费用', tip: '' },
    { label: '其他费用', tip: '' },
    { label: '合计金额', tip: '1' },
    { label: '税率(%)', tip: '' },
    { label: '税金', tip: '税金=合计金额*税率' },
    { label: '货值', tip: '1' },
  ])
  let itemInfo = ref<any>({})
  let showEditCustomModal = ref<any>(false)
  let customImgList = ref<Array<any>>([])
  let mergeCustomPic = ref<any>({})
  const init = async () => {
    itemInfo.value = props.info
    customImgList.value = props.info?.customInfo?.customPicList || []
    mergeCustomPic.value = props.info?.customInfo?.mergeCustomPic || {}
    if (!props.info.supplierCloseCost) {
      itemInfo.value.supplierCloseCost = {}
    }
  }

  const updateInfo = async () => {
    const res = await getCustomOrderPurchaseById({ id: props.info.id })
    itemInfo.value = res?.data || {}
    customImgList.value = itemInfo.value?.customInfo?.customPicList || []
    mergeCustomPic.value = itemInfo.value?.customInfo?.mergeCustomPic || {}
  }

  const close = () => {
    showvisible.value = false
    emits('save')
  }

  const download = () => {
    let arr = []
    arr = [...customImgList.value.filter((item: any) => item.url)]
    if (mergeCustomPic.value.url) arr.push(mergeCustomPic.value)
    downloadMul(arr, '定制图和合并图')
  }

  const getSupplierName = (data: any) => {
    if (data.supplierCloseCost.semiNoPick) {
      return '供应商'
    } else {
      return data.supplierCloseCost.semiWarehouseCode == 'CK86' ? '需求方' : '采购方'
    }
  }

  onMounted(init)
</script>

<style lang="less" scoped>
  .custom-info-con {
    .img-con {
      width: 300px;
    }
    .suctom-basic-info {
      flex: 1;
    }
  }

  .coast-purchase {
    .bottom {
      .supplier-coast {
        width: 50%;
      }
      .sale-coast {
        margin-left: 10px;
        flex: 1;
      }
    }
  }
</style>
